<template>
    <section id="slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide page-full">
                    <div class="slider-body">
                        <div class="slider-ct ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                            <h1>苦心获得的技能只做一份工作？</h1>
                            <p>你的专业技能应该获得更多回报</p>
                            <p>免费注册云竹众包成为自由工作者</p>
                        </div>
                        <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">我要注册</a>
                    </div>
                </div>
                <div class="swiper-slide page-full">
                    <div class="slider-body">
                        <div class="slider-ct ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                            <h1>适合企业的服务才是高端服务</h1>
                            <p>众智众包解决企业燃眉之急</p>
                            <p>云竹众包致力于高端企业服务</p>
                        </div>
                        <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">发布任务</a>
                    </div>
                </div>
                <div class="swiper-slide page-full">
                    <div class="slider-body">
                        <div class="slider-ct ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                            <h1>术业有专攻，服务有认证</h1>
                            <p>加入云竹众包成为平台认证服务方</p>
                            <p>云竹众包需要专业的你</p>
                        </div>
                        <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">我要加盟</a>
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    </section>
</template>

<script>
    // 整屏
    function fullPage(){
        var full = document.getElementsByClassName("swiper-wrapper")[0];
        var screenWidth = document.documentElement.clientWidth;
        var screenHeight = document.documentElement.clientHeight;
        full.style.width = screenWidth + "px";
        full.style.height = screenHeight + "px";
    }

    fullPage();

    window.onresize = function(){
        fullPage();
    };

    // slider
    var swiper = new Swiper('.swiper-container', {
        autoplay: 50000000,//可选选项，自动滑动
        loop : true, // 形成环路
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        pagination : '.swiper-pagination',
        paginationClickable :true,
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });
</script>